<template>
  <div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" ref="swipe" :lazy-render="true">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <div class="swiper-item-style">
          <van-image :src="item.url" fit="cover" @load="isLoad" lazy-load />
          <div class="swiper-item-title">{{ item.title }}</div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue"

// 父组件传值
let props = defineProps({
  banner: Array
})

const $swiperLoad = defineEmits(['isLoad'])
const isLoad = () => {
  $swiperLoad('isLoad')
}

</script>

<style>
/* 轮播图 */
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 0px;
}

.swiper-item-style {
  color: #fff;
  position: relative;
}

.swiper-item-title {
  position: absolute;
  bottom: 20px;
  margin: 0;
  font-size: 17px;
  width: 100%;
  text-align: center;
  text-shadow: 0.5px 0.5px 0px #000;
}

.van-swipe__indicator {
  width: 8px;
  height: 2px;
  border-radius: 2px;
}
</style>
